import React, { Component } from 'react'
import d3 from 'd3'

export default class rbTree extends Component {
    draw = () => {

        let margin = ({ top: 10, right: 120, bottom: 10, left: 40 })
        let svg = d3.select(".rbtree")
        let width = svg.attr("width")
        let height = svg.attr("height")
        let g = svg.append("g")
            .attr("transform", "translate(" + marge.top + "," + marge.left + ")");
        let dy = width / 6
        let dx = 10
        let data = {
            name: "root",
            chilsdren: [
                { name: "left" },
                {
                    name: "right", children: [
                        { name: "leave", value: 1024 }
                    ]
                }
            ]
        }
        let tree = d3.tree().nodeSize([dx, dy])
        let diagonal = d3.linkHorizontal().x(d => d.y).y(d => d.x)
        const root = d3.hierarchy(data);

        root.x0 = dy / 2;
        root.y0 = 0;
        root.descendants().forEach((d, i) => {
            d.id = i;
            d._children = d.children;
            if (d.depth && d.data.name.length !== 7) d.children = null;
        });
        const gLink = svg.append("g")
            .attr("fill", "none")
            .attr("stroke", "#555")
            .attr("stroke-opacity", 0.4)
            .attr("stroke-width", 1.5);

        const gNode = svg.append("g")
            .attr("cursor", "pointer")
            .attr("pointer-events", "all");
        
        function update(source){
            const duration = d3.event && d3.event.altKey ? 2500 : 250;
            const nodes = root.descendants().reverse();
            const links = root.links();
        }
        
        update(root)
    }

    componentDidMount() {
        this.draw()
    }

    render() {
        return (
            <div>
                return  <svg className="rbtree" width="960" height="600"></svg>
            </div>
        )
    }
}
